<!--  -->
<template>
   <div class='webloginpage'>
    <div class="cimg">
      <img :src="limg" />
    </div>
    <div class="loginform">
    <h2>Lizer Book</h2>
      <div>
        <p class="logintitle">账号</p>
        <div class="loginitem">
          <svg t="1704870400503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4245" width="30" height="30"><path d="M828.1 722.4c-17.3-40.9-42-77.5-73.5-109s-68.2-56.2-109.1-73.5c-10.2-4.3-20.6-8.1-31-11.4 54.5-34.7 90.8-95.7 90.8-164.9 0-107.7-87.6-195.4-195.4-195.4-107.7 0-195.4 87.6-195.4 195.4 0 69.9 36.9 131.3 92.2 165.8-9.6 3.1-19 6.6-28.3 10.5-40.9 17.3-77.5 42-109 73.5s-56.2 68.2-73.5 109c-17.9 42.3-27 87.2-27 133.6h46c0-163.8 133.3-297.1 297.1-297.1S809.1 692.2 809.1 856h46c0-46.4-9.1-91.3-27-133.6zM360.6 363.5c0-82.4 67-149.4 149.4-149.4s149.4 67 149.4 149.4-67 149.4-149.4 149.4c-82.4-0.1-149.4-67.1-149.4-149.4z" fill="#9596bf" p-id="4246"></path></svg>
          <input class="loginput" v-model="username" placeholder="请输入账号" type="text">
        </div>
      </div>
      <div>
        <p class="logintitle">密码</p>
        <div class="loginitem">
          <svg t="1704870435618" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5244" width="30" height="30"><path d="M869.012601 642.85835c12.107759 0 21.912056-10.031471 21.912056-22.38687l0-196.638519c0-46.985104-37.273928-85.09405-83.262332-85.09405l-75.425853 0c-0.022513-0.021489-0.022513-0.067538-0.047072-0.089028l-7.858992 0 0-62.188364c0-103.028515-81.636299-186.584536-182.363398-186.584536l-36.479843 0c-100.045577 0-181.165106 82.449827-182.2713 184.529737 0 0.181125-0.11154 0.316202-0.11154 0.497327 0 0.113587 0.065492 0.203638 0.065492 0.315178 0 0.407276-0.065492 0.814552-0.065492 1.242294l0.316202 0c0.858554 12.132318 10.704806 21.799492 23.040762 21.799492 12.377912 0 22.204721-9.667174 23.037692-21.799492l0.227174 0c3.479241-77.863369 63.339584-139.938146 136.844691-139.938146l34.290991 0c75.765591 0 137.184429 65.825195 137.184429 147.031705l0 55.095829 34.108842 0c0 0.021489 0 0.067538 0.023536 0.089028L355.676164 338.739934c0-0.021489 0.021489-0.067538 0.045025-0.089028l-49.334615 0c-0.022513 0.021489-0.045025 0.067538-0.045025 0.089028l-95.483678 0c-45.99045 0-83.263355 38.108946-83.263355 85.09405l0 422.777933c0 46.984081 37.272905 85.070514 83.263355 85.070514l596.804455 0c45.988404 0 83.262332-38.086433 83.262332-85.070514l0-24.599258c-0.047072-12.311397-9.850345-22.295795-21.912056-22.295795s-21.842471 9.984399-21.913079 22.295795l0 0.066515c0 0.021489 0 0.021489 0 0.046049 0 0 0 0.046049 0 0.066515l0 19.946284c0 24.733311-19.6045 44.771693-43.820018 44.771693L215.238644 886.909715c-24.216541 0-43.821041-20.038382-43.821041-44.771693L171.417603 428.306856c0-24.736381 19.6045-44.771693 43.821041-44.771693L803.278481 383.535163c24.215518 0 43.820018 20.036335 43.820018 44.771693l0 192.164624C847.099523 632.826879 856.904843 642.85835 869.012601 642.85835zM517.142625 647.328152l-31.601742 0c-4.38282 0-7.885598 3.569292-7.885598 7.972579l0 95.510284c0 4.40431 3.524267 7.951089 7.885598 7.951089l31.601742 0c0.947582 0 1.807159-0.227174 2.620687-0.541329 64.87659-5.399987 115.860774-60.043514 115.880217-126.791731 0-70.344115-56.607252-127.35762-126.404921-127.35762-66.234517 0-120.491235 51.365878-125.866662 116.736725-0.273223 0.837064-0.497327 1.699712-0.497327 2.64627l0 31.847336c0 4.406356 3.523243 7.954159 7.882528 7.954159l31.602765 0c4.359284 0 7.904017-3.548826 7.904017-7.954159l0-7.972579c-1.036609-5.149277 0-10.434653 0-15.900132 0-43.9817 35.353183-79.606059 78.974679-79.606059 43.640939 0 78.992075 35.623335 78.992075 79.606059 0 38.489616-27.130917 70.612221-63.204507 77.998445l0-54.125735C525.026176 650.897444 521.502933 647.328152 517.142625 647.328152z" fill="#9596bf" p-id="5245"></path></svg>
          <input class="loginput" v-model="password" placeholder="请输入密码" type="password">
        </div>
      </div>
      <button class="loginbtn" @click="goLogin">
      <div class="svg-wrapper-1">
        <div class="svg-wrapper">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
          >
            <path fill="none" d="M0 0h24v24H0z"></path>
            <path
              fill="currentColor"
              d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"
            ></path>
          </svg>
        </div>
      </div>
      <span>登录</span>
    </button>

    </div>
   </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { login } from '@/api/api.js'
import { getip } from '@/api/webapi.js'
import stu from '@/assets/web/login.png'
import '@/plugins/antdesign'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      limg: stu,
      username: '',
      password: ''
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    goLogin () {
      if (this.username === '' || this.password === '') {
        this.$message.error('账号密码不能为空')
        return
      }
      const obj = {
        username: this.username,
        password: this.password
      }
      login(obj).then((res) => {
        if (res.code === 200) {
          if (res.data.per === true) {
            this.$store.commit('setToken', res.data.token)
            this.$store.commit('setRefreshToken', res.data.refresh)
            this.$router.push('/backend')
          } else {
            this.$message.error('此账号没有权限访问后台')
          }
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    isMobile () {
      const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    },
    getView () {
      if (this.isMobile()) {
        this.$router.push('/start')
      }
    },
    postUserIp () {
      getip().then((res) => {
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.postUserIp()
    this.getView()
  }
}
</script>
<style lang='less' scoped>
.webloginpage{
  font-family: '黑体';
  width: 100%;
  height: 100%;
  .loginform{
    width: 450px;
    height: 350px;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translate(0, -50%);
    // border: 1px solid #eee;
    // box-shadow: 0px 0px 5px 1px #eee;
    h2{
      text-align: center;
      color: #fe8e64;
    }
    .logintitle{
      color: #9596bf;
    }
  }
  .loginitem{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fed1bb;
    margin: 10px 0px;
  }
  .loginput{
    // width: 100%;
    border: none;
    outline: none;
    height: 50px;
    margin-left: 5px;
  }
  .cimg{
    // position: absolute;
    // left: 0%;
    // top: 50%;
    // transform: translate(0, -50%);
    height: 100%;
    img{
      height: 99%;
    }
  }
}
.loginbtn {
  margin-top: 20px;
  font-family: inherit;
  font-size: 20px;
  background: #df6c5a;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  float: right;
}

.loginbtn span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

.loginbtn svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.loginbtn:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

.loginbtn:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.loginbtn:hover span {
  transform: translateX(5em);
}

.loginbtn:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

</style>
